<template>
  <div class="common-layout">
    <el-container>
      <el-aside width="200px" style="background-color: aliceblue;">Aside</el-aside>
      <el-container>
        <el-header>
          <div class="isdark">
  <el-switch
    v-model="value2"
    class="mt-2"
    @change="toggleDark()"
    style="margin-left: 24px;--el-switch-on-color: #000; --el-switch-off-color: #eff502d6"
    inline-prompt
     :active-action-icon="Moon"
    :inactive-action-icon="Sunny"
  />
 </div>
          <top/>
  <el-icon :size="size" :color="color">
      <Edit />
    </el-icon>
        </el-header>
        <el-main>Main</el-main>
      </el-container>
    </el-container>
  </div>

  </template>
  <script setup>
  import top from './top.vue'
  import { useDark, useToggle } from '@vueuse/core'
import { Sunny, Moon } from '@element-plus/icons-vue'
  const isDark = useDark()
const toggleDark = useToggle(isDark)
const value2 = ref(true);
  </script>
  <style scoped>
 .layout-container-demo .el-header {
  position: relative;
  background-color: var(--el-color-primary-light-7);
  color: var(--el-text-color-primary);
}
.layout-container-demo .el-aside {
  color: var(--el-text-color-primary);
  background: var(--el-color-primary-light-8);
}
.layout-container-demo .el-menu {
  border-right: none;
}
.layout-container-demo .el-main {
  padding: 0;
}
.layout-container-demo .toolbar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  right: 20px;
}
.isdark{
  position: absolute;
  z-index: 999;
  top: 33px;
  right: 92px;
}
  </style>
  